<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    //el的两种写法
    //    const v = new Vue({
    //         // el:"#root",//第一种
    //         data:{
    //             name:"尚硅谷"
    //         }
    //     })
    //     v.$mount("#root");

    //  data的两种写法
    new Vue({
        el: "#root",
        // data:{
        //     name:"鬼谷"//第一种data写法
        // }
        data() {     //vue管理的函数，不要写箭头函数，否则this指向就不是vue实例了
            return {
                name: "鬼谷"//第二种写法,组件中必须使用函数式
            }
        }
    })

</script>

</html>